<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Whistle Web Debugger</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
html, body {font-family: Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 13px;}
body {margin: 6px;}
.menu-list, .menu-list li { list-style: none; margin: 0; padding: 0;}
.menu-list li {display: block; line-height: 26px; height: 26px; padding-left: 25px; width: 100px; color: #000; cursor: pointer; position: relative;}
.menu-list .item:hover { border: solid 1px #bcd; line-height: 24px; padding-left: 24px; border-radius: 3px; color: #47b;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.4, hsl(215, 67%, 97%)), color-stop(0.41, hsl(213, 48%, 95%)));}
.menu-list .checked:before {content: '●'; color: rgb(78, 200, 59); font-size: 16px; position: absolute; left: 9px; top: -1px;}
.menu-list .show-ip.checked:before {content: '√'; color: rgb(78, 200, 59); font-size: 12px; position: absolute; left: 9px; top: -1px;}
.menu-list .checked:hover:before {left: 8px;}
.menu-list .separator {height: 0; border-bottom: 1px solid #ddd; margin: 3px 0;}
</style>
</head>
<body>
<ul id="menu" class="menu-list">
	<li class="item network">Network</li>
	<li class="item rules">Rules</li>
	<li class="item values">Values</li>
	<li class="separator"></li>
	<li class="item set-proxy">设置代理</li>
	<li class="separator"></li>
	<li class="item proxy direct">直接请求</li>
	<li class="item proxy system">系统代理</li>
	<li class="separator"></li>
	<li class="item show-ip">显示IP</li>
	<li class="item about">About</li>
</ul>
<script src="js/jquery.js"></script>
<script src="js/popup.js"></script>
</body>
</html>